<template>
  <div class="tag-input-panel">
    <div class="tag-list">
      <el-tag
        class="tag-item"
        v-for="tag in modelValue"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
    </div>
    <div class="tag-input">
      <el-input
        clearable
        placeholder="按回车键创建标签"
        v-model="inputValue"
        :maxlength="15"
        resize="none"
        show-word-limit
        @keyup.enter="inputChange"
      ></el-input>
    </div>
    <div class="info">最多还可以 输入{{ 10 - modelValue.length }}个标签</div>
  </div>
</template>

<script setup lang="ts">
import message from '@/utils/message'
import { ref } from 'vue'

const props = defineProps<{
  modelValue: string[]
}>()

const handleClose = (tag: string) => {
  props.modelValue.splice(props.modelValue.indexOf(tag), 1)
}

const inputValue = ref()
const inputChange = () => {
  if (!inputValue.value) {
    return
  }
  if (props.modelValue.length >= 10) {
    message.warning('最多只能输入10个标签')
    inputValue.value = ''
    return
  }
  props.modelValue.push(inputValue.value)
  inputValue.value = ''
}
</script>

<style lang="less" scoped>
.tag-input-panel {
  width: 100%;
  border: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 5px;
  //   padding: 0px 10px;
  padding-right: 10px;
  .tag-list {
    .tag-item {
      margin-left: 10px;
      margin-bottom: 2px;
    }
  }
  .tag-input {
    flex: 1;
    min-width: 150px;
    margin-left: 10px;
    :deep(.el-input__wrapper) {
      box-shadow: none;
      padding: 0px;
    }
  }
  .info {
    color: #939393;
    font-size: 12px;
  }
}
</style>
